<template>
  <div class="bg-color">
    <div class="weui-cells weui-cells_checkbox">

      <div class="address-box" v-for="(address,index) in addressList" :key="index">
        <a href="javascript:;" @click.prevent="goWriteOrder(address)">
          <div class="weui-cell">
            <div class="weui-cell__bd">
              <p>{{address.receiverName}}</p>
            </div>
            <div class="weui-cell__ft">{{address.receiverMobileNo}}</div>
          </div>
          <div class="order-address">{{address.addressProvince+address.addressCity+address.addressCounty+address.address}}</div>
        </a>

        <div class="weui-cell default">
          <div class="weui-cell__bd">
            <label class="weui-check__label" :for="address.id" @click="setDefaultAddress(address.id)">
              <div class="weui-cell__hd">
                <input type="radio" class="weui-check" name="checkbox1" :id="address.id" :checked="address.wasDefault==1">
                <i class="weui-icon-checked"></i>
              </div>
              <div class="weui-cell__bd">
                <p :class="{active:address.wasDefault==1}">{{address.wasDefault==1?'默认地址':'设为默认'}}</p>
              </div>
            </label>
          </div>
          <div class="weui-cell__ft">
            <div @click="editClick(address)"><img src="../../../../static/images/order/edit.png" alt="">编辑</div>
            <div @click="removeClick(address.id)"><img src="../../../../static/images/order/remove.png" alt="">删除</div>
          </div>
        </div>
      </div>

    </div>

    <!--弹出框-->
    <div class="dialog" v-show="isRemoveAddress">
      <div class="weui-mask"></div>
      <div class="weui-dialog">
        <div class="weui-dialog__bd">确定要删除该地址吗？</div>
        <div class="weui-dialog__ft">
          <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" @click.prevent="cancelRemove">取消</a>
          <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" @click.prevent="removeAddress">确定</a>
        </div>
      </div>
    </div>


    <router-link class="weui-btn weui-btn_warn" :to="{name:'addAddress',query:{source:source,orderId:orderId}}">添加新地址</router-link>


  </div>
</template>

<script>
  import {setStore} from '../../../assets/js/tools';
  import {getAddressList,setDefaultAddress,removeAddress} from '../../../assets/js/getData';
  export default {
    name: "addressList",
    data(){
      return {
        addressList:[],
        isRemoveAddress:false,//是否显示删除地址提示框
        removeAddressId:'',//当前要删除的地址id
        source:null,//来源
        orderId:null,
      }
    },
    created(){
      this.getAddressList();
      this.source = this.$route.query.source;
      this.orderId = this.$route.query.orderId;
    },
    methods:{
      //获取地址列表
      async getAddressList(){
        let res = await getAddressList();
        if(res.data.reqResult.code>0){
          this.addressList = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //设置默认地址
      setDefaultAddress(id){
        setDefaultAddress(id).then(res => {
          if(res.data.reqResult.code>0){
            this.getAddressList();
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //确认删除地址
      removeAddress(){
        this.isRemoveAddress = !this.isRemoveAddress;
        removeAddress(this.removeAddressId).then(res => {
          if(res.data.reqResult.code>0){
            this.getAddressList();
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //点击删除地址按钮
      removeClick(id){
        this.isRemoveAddress = !this.isRemoveAddress;
        this.removeAddressId = id;
      },
      //取消删除
      cancelRemove(){
        this.isRemoveAddress = !this.isRemoveAddress;
      },
      //编辑地址
      editClick(address){
        this.$router.push({name:'addAddress',query:{address:address}});
      },
      //返回订单页
      goWriteOrder(address){
        if(this.source=='me'){
          return;
        }else if(this.source=='orderDetail'){
          this.$router.replace({name:'orderDetail',query:{address:address,orderId:this.orderId}});
        } else {
          setStore('address',address);
          this.$router.replace({name:'writeOrder'});
        }
      },

    }
  }
</script>

<style scoped>
  .bg-color{
    min-height: 100vh;
    background: #F2F2F2;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .weui-cells{
    background: #F2F2F2;
  }
  .weui-cells:after{
    border: none;
  }
  .address-box{
    margin-bottom: 0.5rem;
    background: #ffffff;
  }
  .address-box .weui-cell{
    padding: 0.5rem 0.65rem 0.6rem 0.65rem;
  }
  .order-address{
    padding: 0 0.65rem 0.6rem 0.65rem;
    font-size: 0.7rem;
    color: #1A1A1A;
  }
  .address-box .weui-check__label{
    display: flex;
    align-items: center;
  }
  .address-box .default{
    justify-content: space-between;
  }
  .address-box .default:before{
    left: 0;
  }
  .address-box .default .weui-cell__bd{
    flex: none;
  }
  .address-box .default .weui-cell__ft{
    display: flex;
  }
  .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
    color: #C50000;
  }
  .address-box .default .weui-check__label .weui-cell__hd{
    font-size: 0.6rem;
  }
  .weui-cells_checkbox .weui-icon-checked:before {
    font-size: 0.775rem;
  }
  .address-box .default .weui-cell__bd p{
    font-size: 0.6rem;
  }
  .address-box .default .weui-cell__bd p.active{
    color: #C50000;
  }
  .address-box .default .weui-cell__ft div{
    font-size: 0.6rem;
  }
  .address-box .default .weui-cell__ft div:first-child{
    margin-right: 0.45rem;
  }
  .address-box .default .weui-cell__ft img{
    width: 0.85rem;
    margin-right: 0.2rem;
    vertical-align: bottom;
  }
  .weui-btn_warn{
    width: 100%;
    border-radius: 0;
    /*position: absolute;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    line-height: 2.4rem;
  }

</style>
